import React, { useState, useEffect } from "react";
import { Layout, Menu, message, Badge, Switch } from "antd";
import { useHistory, useLocation } from "react-router-dom";
import { getViewResouce } from "../../api/oss/viewResource";
import menuConfig from "./menuConfig.js";
import './index.css'
const LeftSider = Layout;
const LeftMenu = (props) => {
  const [theme, setTheme] = useState("dark");
  const [menuData, setMenuData] = useState();
  const history = useHistory();
  const fechData = async() => {
    let datalist = [];
   let res = await getViewResouce();
   if (res.flag) {
    datalist = res.data;
    datalist = datalist.map((item) => {
      const key = item.primaryMenu.key;
      let iconType = menuConfig.hasOwnProperty(key)
        ? menuConfig[key].iconType
        : {};
      const name = item.primaryMenu.name;
      let menuNode = {
        key: `${key}`,
        icon: React.createElement(iconType),
        label: `${name}`,
        children: [],
      };

      menuNode.children = item.viewVos.map((data, index) => {
        return {
          key: data.optionKey,
          label: data.name,
        };
      });
      return menuNode;
    });
    setMenuData([...datalist]);
    }
  };
  const routing = (e)=>{
    history.push("/"+e.key)
  }
  const changeTheme = (value) => {
    setTheme(value ? "dark" : "light");
  };
  useEffect(() => {
    fechData();
  }, []);
  return (
    <LeftSider width={200} className="leftSider">
      <Switch
        checked={theme === "dark"}
        onChange={changeTheme}
        checkedChildren="Dark"
        unCheckedChildren="Light"
      />
      <br />
      <Menu
        theme={theme}
        mode="inline"
        defaultSelectedKeys={["home"]}
        defaultOpenKeys={["home"]}
        style={{
          height: "100%",
          borderRight: 0
        }}
        onClick={routing}
        items={menuData}
      />
    </LeftSider>
  );
};

export default LeftMenu;
